<template>
  <div class="product"> 
    <!-- 横向排列 -->
    <ul>
        <li>
            <img src="../../assets/img/1.jpg">
            <span>缤纷彩虹曲奇饼</span>
            <aside>52000</aside>
        </li>
        <li>
            <img src="../../assets/img/2.jpg">
            <span>女士单肩手提包</span>
            <aside>52000</aside>
        </li>
        <li>
            <img src="../../assets/img/3.jpg">
            <span>berko蛋糕</span>
            <aside>52000</aside>
        </li>
        <li>
            <img src="../../assets/img/4.jpg">
            <span>巧克力甜甜圈</span>
            <aside>52000</aside>
        </li>
        <li>
            <img src="../../assets/img/5.jpg">
            <span>室内小盆绿植盆栽</span>
            <aside>52000</aside>
        </li>
    </ul>

    <!-- 选项卡 -->
    <div class="cursor">  
        <!-- 按钮区域 -->
        <div class="btnlist">
            <button class="active" @click="btn1()">畅销榜</button>
            <button>热量榜</button>
        </div>

        <!-- 展示区 -->
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th>图片</th>
                <th>id</th>
                <th>标题</th>
                <th>上架时间</th>
                <th>访问量</th>
            </tr>
            <tr v-for=" item in lists " :key="item.id">                                                                                   
                <td><img :src="item.imgURL" alt=""></td>
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td onsubmit="timestampToTime();return false">{{timestampToTime(item.createTime)}}</td>
                <td>{{item.visits}}</td>
            </tr>
        </table>
    </div>
  </div>
</template>

<script>
import list from '@/assets/index.js';
export default {
    name : 'ProductList',
    data(){
        return {
            list,
            lists : list.ImgList,
            
        }
    },
    methods:{
        timestampToTime(timestamp){
              let date = new Date(timestamp);
              let Y = date.getFullYear() + "-";
              let M =date.getMonth()+1
                    + "-";
              let D = date.getDate();
              let h = date.getHours() + ":";
              let m = date.getMinutes() + ":";
              let s = date.getSeconds();
            return Y + M + D +' '+ h + m + s;
            }
                    }
}
    

</script>

<style scoped>
.product{
    width: 100%;
    height: 100%;
}
.product ul{
    width: 95%;
    height: 210px;
    margin: 30px auto;
    background-color: rgb(199, 228, 199);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product ul li{
    width: 19%;
    background-color: rgb(62, 173, 62);
    text-align: center;
    position: relative;
}
.product ul li aside{
    position: absolute;
    right: 0;
    top: 0;
}
.product ul li img{
    width: 85%;
    margin-top: 20px;
}
.product ul li span{
    display: block;
    width: 100%;
    color: white;
}
.product .cursor{
    width: 95%;
    overflow: hidden;
    margin: 0 auto;
      background-color: rgb(199, 228, 199);
}
.product .cursor .btnlist{
    width: 100%;
    overflow: hidden;
    border-bottom: 2px dotted white;
}
.product .cursor .btnlist button{
    border: none;
    background-color: rgb(137, 224, 137);
    border:  1px solid rgb(62, 173, 62);
    color: white;
    width: 200px;
    height: 50px;
}
.product .cursor .btnlist button.active{
    background-color: white;
    color: rgb(62, 173, 62);
    border: 1px solid rgb(62, 173, 62);
}
.product .cursor table{
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.product .cursor table th{
    height: 50px;
    font-size: 25px;
}
.product .cursor table td{
    height:45px;
    font-size: 20px;
}
.product .cursor table td img{
    width: 80px;
    height: 80px;
}
</style>